window.onload = function () {
  const header = [
    { name: "headr1", color: "red" },
    { name: "headr2", color: "yellow" },
    { name: "headr3", color: "blue" },
    { name: "headr4", color: "green" },
    { name: "headr5", color: "skyblue" },
  ];
  function createDom(dom) {
    return document.createElement(dom);
  }
  function miniBox(text, color, e) {
    let div = createDom("div");
    div.className = "mini-box";
    div.style.background = color;
    div.innerHTML = text;
    return div;
  }
  function createMiniBox(e) {
    let left = e.pageX;
    let top = e.pageY;
    this._miniBox.style.left = left + 3 + "px";
    this._miniBox.style.top = top + 3 + "px";

    document.body.appendChild(this._miniBox);
  }
  class Dorp {
    constructor(container, data) {
      this._container = container;
      this._data = data;
      this._currentBox = null;
      this._miniBox = null;
      this._isMove = true;
      this.init();
    }
    init() {
      this.createHeader();
      document.onmouseup = this.mouseup.bind(this);
    }
    createHeader() {
      if (!Array.isArray(this._data)) {
        throw new Error("_data must Array");
      }
      let that = this;
      let fragement = document.createDocumentFragment();
      this._data.map((item, index) => {
        let dragBox = createDom("div");
        dragBox.className = "drag-box";
        dragBox.style.background = item.color;
        dragBox.style.width =
          this._container.clientWidth / this._data.length + "px";
        dragBox.style.left =
          (this._container.clientWidth / this._data.length) * index + "px";
        dragBox.innerHTML = item.name;
        dragBox.setAttribute("col-index", index);
        dragBox.onmousedown = function (e) {
          return that.mousedown(e, this, that);
        };
        dragBox.onmouseenter = function (e) {
          return that.mouseenter(e, this, that);
        };
        fragement.appendChild(dragBox);
      });
      this._container.appendChild(fragement);
    }
    // 鼠标按下记录当前被按下的盒子
    mousedown(e, currentDom, that) {
      that._currentBox = currentDom;
      document.onmousemove = that.mousemove.bind(this);
    }
    // 鼠标进入到某一个块中
    mouseenter(e) {
      if (this._currentBox) {
        let currentIndex = this._currentBox.getAttribute("col-index");
        let targetIndex = e.target.getAttribute("col-index");
        if (currentIndex !== targetIndex && this._isMove) {
          console.log(1);
          this._isMove = false;
          let target = e.target.offsetLeft;
          let srcTarget = this._currentBox.offsetLeft;
          e.target.style.left = srcTarget + "px";
          this._currentBox.style.left = target + "px";
          setTimeout(() => {
            this._isMove = true;
          }, 200);
        }
      }
    }
    // 点击 移动的时候会出现一个和当前选中盒子一样的迷你盒子
    mousemove(e) {
      if (!this._miniBox) {
        this._miniBox = miniBox(
          this._currentBox.innerHTML,
          getComputedStyle(this._currentBox, false)["background-color"],
          e
        );
      }
      this._miniBox.style.cursor = "move";
      // 鼠标按下移动生成一个mini的box;
      createMiniBox.call(this, e);
    }
    mouseup() {
      if (this._miniBox) {
        document.body.removeChild(this._miniBox);
      }
      this._miniBox = null;
      this._currentBox = null;
      document.onmousemove = null;
      console.log("up");
    }
  }
  let container = document.querySelector(".box");
  new Dorp(container, header);
};
